<template>
  <div>生命周期</div>
</template>

<script lang="ts">
/**
 * 生命周期
 */
import {
  onMounted,
  onUpdated,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from "vue";

export default {
  name: "test1",
  setup() {
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
    onActivated(() => {
      console.log("onActivated");
    });
    onDeactivated(() => {
      console.log("onDeactivated");
    });
    onErrorCaptured(() => {
      console.log("onErrorCaptured");
    });

    onRenderTracked((event) => {
      console.log("状态跟踪组件----------->");
      console.log(event);
    });
    onRenderTriggered((event) => {
      console.log("状态触发组件--------------->");
      console.log(event);
      // 对 event 对象属性的详细介绍：
      // - key 那边变量发生了变化
      // - newValue 更新后变量的值
      // - oldValue 更新前变量的值
      // - target 目前页面中的响应变量和函数
    });
  },
};
</script>


<style>
</style>
